<script setup>
import MoniterItem from "@/components/MoniterItem.vue";

</script>

<template>
  <MoniterItem title="县乡村监控数量统计" style="width: 100%;">
    <template #content>
      <div style="height: 100%" ref="RuralMonitoring" id="RuralMonitoring"></div>
    </template>
  </MoniterItem>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "Ruralmonitoring",
  data(){
    return{

    }
  },
  mounted() {
    this.init()
  },
  methods:{
    init(){
      const myChart = echarts.init(
        document.getElementById("RuralMonitoring")
      );
      let xdata =  ["新城街道", "东城街道", "老街街道", "黄寨镇", "练集镇", "魏集镇"]
      let seriesData = [2589,655,509,368,310,304]
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          backgroundColor: '#0D68CE',
          borderColor:'#0D68CE',
          textStyle: {
            color: '#fff'
          },
          formatter: (param) => {
            let result = `<div>${param[0].name}:<span style="color:#20CEFF;">${param[0].value}</span>个</div>`
            return result
          }
        },

        grid: {
          top: "30",
          left: "1%",
          right: "1%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [{
          type: "category",
          IsStaggered: "",
          data: xdata,
          axisPointer: {
            type: "shadow"
          },
          axisLabel: {
            color: "#A9D3FC",
            fontSize: 12,
            fontFamily: "Arial",
            margin: 7,
            interval: 0,
            rotate: 0,
            formatter: function (params) {
              var newParamsName = "";// 最终拼接成的字符串
              var paramsNameNumber = params.length;// 实际标签的个数
              var provideNumber = 2;// 每行能显示的字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
              /**
               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
               */
              // 条件等同于rowNumber>1
              if (paramsNameNumber > provideNumber) {
                /** 循环每一行,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = "";// 表示每一次截取的字符串
                  var start = p * provideNumber;// 开始截取的位置
                  var end = start + provideNumber;// 结束截取的位置
                  // 此处特殊处理最后一行的索引值
                  if (p == rowNumber - 1) {
                    // 最后一次不换行
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // 每一次拼接字符串并换行
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr;// 最终拼成的字符串
                }

              } else {
                // 将旧标签的值赋给新标签
                newParamsName = params;
              }
              //将最终的字符串返回
              return newParamsName
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.25)"
            }
          },
          axisTick: {
            show: false
          }
        }],
        yAxis: [{
          show: true,
          type: "value",
          name: "单位:个",
          nameTextStyle: {
            color: "rgba(255,255,255,0.84)",
            fontSize: 12,
            padding: [0, 0, 0, -15]
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.25)",
              width: 1
            }
          },
          axisLabel: {
            formatter: "{value}",
            color: "#A9D3FC",
            fontSize: 12,
            fontFamily: "Arial",
            margin: 7
          },
          minInterval: 0,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.25)"
            }
          }
        },
          {
            show: false,
            type: "value",
            name: "",
            minInterval: 0,
            axisLabel: {
              formatter: "{value}",
              color: "#ffffff",
              fontSize: 12,
              fontFamily: "Arial",
              margin: 7
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(23,225,177,0.12)",
                width: 1
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#49D9FE"
              }
            }
          }],
        series: [{
          name: '',
          type: 'bar',
          barWidth: '30%',
          xAxisIndex: 0,
          yAxisIndex: 0,
          // label: {
          //   show: true,
          //   position: 'top',
          //   distance: 15,
          //   color: '#fff',
          //   fontSize: 11,
          //   formatter: '{c}',
          // },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(236,103,14,0.77)',
                }, {
                  offset: 1,
                  color: 'rgba(236,103,14,0.52)',
                },
                ],
              ),
            },
          },
          data: seriesData.map(item => item),
          zlevel: 11,
        }, {
          name: '',
          type: 'bar',
          barWidth: '50%',
          xAxisIndex: 0,
          yAxisIndex: 1,
          barGap: '-135%',
          data: seriesData.map(() => Math.max.apply(null, seriesData.map(p => p)) * 1.5),
          tooltip: {
            show:false,
            backgroundColor: 'transparent',
            formatter: ' ',
          },
          itemStyle: {
            normal: {
              color: 'rgba(255,255,255,0.1)',
            },
          },
          zlevel: 9,
        }]
      }
      myChart.setOption(option);
    }
  }
};
</script>

<style scoped>

</style>
